<template>
	<div class="resource">
		<el-form :inline="true">
			<el-form-item label="资源名称">
				<el-input size="small" v-model="formData.resourceName" placeholder="请输入资源名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="reset" size="small">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="show_resource_dialog('new')" size="small">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="download_template">模板下载</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="open_import_resource">导入</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="export_resources">导出</el-button>
			</el-form-item>
			<el-form-item>
				<el-button :disabled="multipleSelection.length == 0" type="primary" size="small" @click="deleteResource">批量删除</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" v-loading="tableLoading"
				:header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
				:cell-style="{ textAlign: 'center' }" max-height="580" size="small"
				@select-all="selectAll" @select="rowSelect">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="resourceName" label="资源名称"> </el-table-column>
				<el-table-column prop="resourceDescribe" label="资源描述">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="show_resource_dialog('edit', scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteResource(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<br>
		
		<!-- 分页 -->
		<el-row>
			<el-pagination background align="center" @size-change="pageSizeChange"
				@current-change="currentPageChange" :current-page="formData.pageNum"
				:page-sizes="[5, 10, 15, 20]" :page-size="formData.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="formData.total">
			</el-pagination>
		</el-row>
		
		<!-- 资源新增/编辑 dialog -->
		<el-dialog :title="resourceDialogType == 'edit' ? '编辑资源' : '新增资源'" :visible.sync="resourceDialogVisible" @close="closeResourceDialog"  width="35%">
			<div>
				<el-form label-width="100px">
					<el-form-item label="资源名称" required>
						<el-input v-model="resourceForm.resourceName" placeholder="请输入资源名称"></el-input>
					</el-form-item>
					<el-form-item label="资源描述">
						<el-input v-model="resourceForm.resourceDescribe" placeholder="请输入资源描述"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="resourceDialogVisible = false">取 消</el-button>
				
				<el-button v-if="resourceDialogType=='new'" type="primary" @click="saveResource">确 定</el-button>
				<el-button v-if="resourceDialogType=='edit'" type="primary" @click="editResource">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 资源列表导入 dialog -->
		<el-dialog title="导入资源" :visible.sync="importResourceDialogVisible" width="35%">
			<div>
				<el-upload action="/api/resources/info/import" ref="refImportResource"
					:auto-upload="false"
					:on-success="upload_resource_success"
					:on-error="(e) => { this.$message.error(e) }"
					:file-list="resourceFiles" :limit="1" name="file">
					<el-button size="small" type="success">选取文件</el-button>
					<div slot="tip" class="el-upload__tip">只能上传导出的文件，且字段不可更改</div>
				</el-upload>
			</div>
			<span slot="footer">
				<el-button size="small" @click="importResourceDialogVisible = false">取 消</el-button>
				<el-button size="small" type="primary" @click="import_resource">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			catalog: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				resourceDialogType: 'new', //资源弹窗类型
				resourceForm: { //资源的新增和编辑
					resourceName: '',
					resourceDescribe: ''
				},
				initResourceForm: { //资源的新增和编辑
					resourceName: '',
					resourceDescribe: ''
				},
				resourceDialogVisible: false, //资源窗口是否显示
				importResourceDialogVisible: false, //导入资源窗口是否显示
				resourceFiles: [], //要上传的资源列表excel
				multipleSelection: [], //被选中的行
				formData: { //查询表单
					resourceName: '',
					pageNum: 1,
					pagesize: 10,
					total: 0
				},
				tableData: [],
				tableLoading: false //表格加载中
			}
		},
		mounted() {
			this.load_table_data()
		},
		watch: {
			catalog(newval) {
				this.load_table_data()
			}
		},
		methods: {
			upload_resource_success() {
				this.$message.success('资源上传成功')
				this.load_table_data()
			},
			download_template() { //下载资源模板
				this.$util.download('/api/resources/info/importTemplate')
			},
			open_import_resource() { //打开导入资源窗口
				this.importResourceDialogVisible = true;
			},
			import_resource() { //上传资源文件
				this.$refs.refImportResource.submit();
			},
			export_resources() { //导出资源
				this.$util.download('/api/resources/info/export')
			},
			reset() {
				this.formData.resourceName = ''
				this.formData.pageNum = 1
				this.load_table_data()
			},
			search() {
				this.load_table_data()
			},
			pageSizeChange(pageSize) {
				this.formData.pageNum = 1;
				this.formData.pagesize = pageSize
				this.load_table_data()
			},
			currentPageChange(pageNum) {
				this.formData.pageNum = pageNum
				this.load_table_data()
			},
			load_table_data() {  //加载资源列表
				this.tableLoading = true;
				this.$http({
					url: '/api/resources/info/list',
					method: 'POST',
					data: {
						...this.formData,
						parentId: this.catalog.catalogId
					}
				}).then( res => {
					this.tableLoading = false;
					this.tableData = res.data.rows;
					this.formData.total = res.data.total;
				})
			},
			show_resource_dialog(type, row) { //添加资源（添加/编辑）窗口
				if(type == 'new' && this.catalog.parentId == 0) {
					this.$message.warning('根节点下不允许添加资源')
					return
				}
				this.resourceDialogType = type;
				this.resourceDialogVisible = true;
				this.resourceForm = type == 'new' ? {} : row;
				console.log("添加资源（添加",this.resourceForm,this.initResourceForm);
				if (type != 'new') {
					for (const key in this.resourceForm) {
						this.initResourceForm[key] = this.resourceForm[key]
					}
				}
			},
			saveResource() { //资源提交保存
				this.$http({
					url : '/api/resources/info',
					method: 'POST',
					data: {
						...this.resourceForm,
						parentId: this.catalog.catalogId
					}
				}).then( res => {
					this.load_table_data()
					this.resourceDialogVisible = false;
				})
			},
			editResource() { //资源提交编辑
				console.log(" 组织用户管理", this.resourceForm);
				this.$http({
					url: '/api/resources/info/update',
					method: 'POST',
					data: this.resourceForm
				}).then( res=> {
					// console.log(res);
					this.load_table_data()
					this.resourceDialogVisible = false;
				})
			},
			// 关闭编辑资源窗口
			closeResourceDialog(){
				console.log("关闭编辑资源窗口");
				for (const key in this.initResourceForm) {
					if (this.resourceForm.hasOwnProperty(key)) {
						this.resourceForm[key] = this.initResourceForm[key]
					}
				}
			},
			deleteResource(row) { //删除资源
				this.$confirm('此操作将删除该资源, 是否继续?', '提示', {
					type: 'error'
				}).then(() => {
					let resIds = row.resId ? row.resId : this.multipleSelection.map(r=>r.resId).join(",")
					this.$http({
						url: `/api/resources/info/delete/${resIds}`,
					}).then( res => {
						this.$message.success('删除成功');
						this.load_table_data()
					})
				})
			},
			selectAll(list) { //选择所有行
				this.multipleSelection = list;
			},
			rowSelect(list) { //选择某一行
				this.multipleSelection = list;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>